import Meta from "../../components/Meta";
import React from "react";
import { request } from "../../utils/request";
import { transData } from "../../utils/tool";
import Header from "../../components/Header/Header";
import Nav from "../../components/Nav/Nav";
import Footer from "../../components/Footer/Footer";



function Detail(props) {
  
  return (
    <div className="goods-detail">
      <Meta>
        <title>NINAMOKA-detail</title>
      </Meta>
      <Header />
      <Nav navData={props.navData} />
      <div className="main">
        {props?.pageData?.title}
        <div className="main-story" dangerouslySetInnerHTML={{ __html: props?.pageData?.content}}></div>

      </div>
      <Footer navData={props.navData} siteData={props.siteInfo}/>
     
    </div>
  );
}

export default Detail;
export async function getServerSideProps(ctx) {
  console.log('ctx serverside===', ctx.params)
  const apiUrl = process.env.APIURL;
  console.log('apiurl', apiUrl)
  // Fetch data from external API
  const navData = await request(`${apiUrl}/api/client/nav`);
  const newNavData = transData(navData.data, "id", "pid");
  const pageData = await request(`${apiUrl}/api/client/pageDetail`,{id:ctx.params.pid});
  const siteInfo = await request(`${apiUrl}/api/client/querySiteInfo`);
 
  return {
    props: {
      navData: newNavData,
      pageData:pageData.data,
      siteInfo:siteInfo.data
      
    }
  }
}